//4.折线图
let myCharts_line = echarts.init(document.querySelector(".map .chart"))
let option_line;
option_line = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        show: true,
        itemHeight: 10,
        textStyle: {
            color: "#4c9bfd",
            fontSize: 18
        }
    },
    grid: {
        left: '2%',
        right: '5%',
        bottom: '5%',
        show: true,
        borderColor: '#012f4a',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['23:00', '18:00', '19:00', '20:00', '21:00', '22:00'],
        axisLabel: {
            color: "#4c9bfd",
            fontSize: "16"
        },
        axisLine: {
            show: false,//去掉轴内间距
        },
        axisTick: {
            show: false,//去掉刻度线
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: "#4c9bfd",
            fontSize: "16"
        },
        axisLine: {
            show: false,//去掉轴内间距
        },
        axisTick: {
            show: false,//去掉刻度线
        },
        splitLine: {
            lineStyle: {
                color: '#012f4a'
            }
        }
    },
    series: [
        {
            name: 'AQI',
            type: 'line',
            smooth: true,
            data: [39, 38, 39, 40, 41, 41]
        },
        {
            name: 'CO',
            type: 'line',
            smooth: true,
            data: [1, 0.9, 0.9, 1, 1, 1]
        },
        {
            name: 'NO2',
            type: 'line',
            smooth: true,
            data: [30, 18, 26, 24, 29, 37]
        },
        {
            name: 'O3',
            type: 'line',
            smooth: true,
            data: [65, 115, 97, 95, 82, 65]
        },
        {
            name: 'PM10',
            type: 'line',
            smooth: true,
            data: [39, 38, 39, 40, 41, 41]
        },
        {
            name: 'PM2.5',
            type: 'line',
            smooth: true,
            data: [24, 18, 20, 23, 24, 24]
        },
        {
            name: 'SO2',
            type: 'line',
            smooth: true,
            data: [8, 7, 7, 9, 10, 9]
        }
    ]
};
myCharts_line.setOption(option_line);
// 图标跟随屏幕自适应
window.addEventListener("resize", function () {
    myCharts_line.resize();
})

//日历组件
laydate.render({
    elem: '#selectTime', //指定元素
    type: 'datetime',
    range: ['#test-startDate-1', '#test-endDate-1']

});
//站点选择
const city = {
    hz: [1, 2, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    fy: [3, 4],
    lz: [14, 15, 16],
    jx: [17, 18, 19],
    jh: [20, 21, 22],
    yw: [23, 24],
    ls: [25, 26, 27],
    nb: [28, 29, 30, 31, 32, 33, 34, 35],
    qz: [37, 38],
    sx: [39, 40, 41],
    tz: [42, 43, 44],
    wz: [45, 46, 47, 48],
    zs: [49, 50, 51]
}

function add_station_id() {
    //清除二级下拉框的信息
    let idSelect = document.getElementById("station_id");
    idSelect.innerText = ""

    //1.获取选择city的名字（value）
    let selectValue = document.getElementById("city").value;

    //2.获取选择city对应的列表
    let idElement = city[selectValue];
    console.log(idElement);

    //3.获取到区县后的进行遍
    for (var i = 0; i < idElement.length; i++) {
        //4.获取当前元素封装成文本节点
        var text = document.createTextNode(idElement[i]);
        //5.创建option对象
        var option = document.createElement("option");
        //6.将区、县的数据添加到option标签对象中
        option.appendChild(text);
        //7.将option放到select标签中
        idSelect.appendChild(option);
    }
}

function init() {
    //初始化方法，刷新页面时，自动选择第一个县区信息
    add_station_id();
}

$('#chaxun').click(function () {
    //获取用户选择的站点
    let myselect = document.getElementById("station_id");
    let index = myselect.selectedIndex;// selectedIndex是所选中的项的index
    let selectedId = myselect.options[index].text;
    //获取用户选择的id
    let inputTime = document.getElementById("selectTime");//获取输入框元素
    let selectedTime = inputTime.value;
    startTime = selectedTime.slice(0, 19);
    endTime = selectedTime.slice(22, 41);
    console.log(startTime);
    console.log(endTime);

    $.ajax({
        url: "http://121.43.234.141:8080/getTimeslotStationInfo", //要请求的后端地址
        type: "GET", //数据发送的方式(POST或者GET)
        data: { stationId: selectedId, startTime: startTime, endTime: endTime }, //需要传递的参数
        dataType: "json", //后端返回的数据格式
        success: function (result) {
            console.log(result.length); //result为响应内容
            value = [];
            value.push(result[0]['aqi'], result[0]['co'], result[0]['no2'], result[0]['o3'], result[0]['pm10'],
                result[0]['pm25'], result[0]['so2'],);
            // 3.更新折线图
            let line_time = []
            let line_AQI = []
            let line_co = []
            let line_no2 = []
            let line_o3 = []
            let line_pm10 = []
            let line_pm25 = []
            let line_so2 = []
            for (let i = 0; i < result.length; i++) {
                line_time.push(result[i]['time'].slice(5, 16));
                line_AQI.push(result[i]['aqi']);
                line_co.push(result[i]['co']);
                line_no2.push(result[i]['no2']);
                line_o3.push(result[i]['o3']);
                line_pm10.push(result[i]['pm10']);
                line_pm25.push(result[i]['pm25']);
                line_so2.push(result[i]['so2']);
            }
            option_line = {

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show: true,
                    itemHeight: 10,

                    textStyle: {
                        color: "#4c9bfd",
                        fontSize: 18
                    }
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    bottom: '5%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: line_time,
                    axisLabel: {
                        color: "#4c9bfd",
                        fontSize: "12"
                    },
                    axisLine: {
                        show: false,//去掉轴内间距
                    },
                    axisTick: {
                        show: false,//去掉刻度线
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "#4c9bfd",
                        fontSize: "16"
                    },
                    axisLine: {
                        show: false,//去掉轴内间距
                    },
                    axisTick: {
                        show: false,//去掉刻度线
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#012f4a'
                        }
                    }
                },
                series: [
                    {
                        name: 'AQI',
                        type: 'line',
                        smooth: true,
                        data: line_AQI,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#800000',
                                    width: 3
                                }
                            }
                        }
                    },
                    {
                        name: 'CO',
                        type: 'line',
                        smooth: true,
                        data: line_co,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#f58231',
                                    width: 3
                                }
                            }
                        }
                    },
                    {
                        name: 'NO2',
                        type: 'line',
                        smooth: true,
                        data: line_no2,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#4463d8',
                                    width: 3
                                }
                            }
                        }
                    },
                    {
                        name: 'O3',
                        type: 'line',
                        smooth: true,
                        data: line_o3,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#fee119',
                                    width: 3

                                }
                            }
                        }
                    },
                    {
                        name: 'PM10',
                        type: 'line',
                        smooth: true,
                        data: line_pm10,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#dcbefe',
                                    width: 3

                                }
                            }
                        }
                    },
                    {
                        name: 'PM2.5',
                        type: 'line',
                        smooth: true,
                        data: line_pm25,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#3cb34b',
                                    width: 3

                                }
                            }
                        }
                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        data: line_so2,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#fcbdd5',
                                    width: 3

                                }
                            }
                        }
                    }
                ]
            };
            myCharts_line.setOption(option_line);
        },
        error: function () {
            console.log('Send Request Fail..');
        }
    });
});